<template>
    <div class="out">
      <zHeader pageTitle="我的户型"></zHeader>
      
      <div class="pageOut">
        <div class="swipeArea">
          <div class="swipeItemOut" v-if="myApartmentTypeData.huXingInfo">
            <div class="apartmentTypeImageOut">
              <img class="apartmentTypeImage" :src="myApartmentTypeData.huXingInfo.urls" @click="imagePreviewHandler(myApartmentTypeData.huXingInfo.urls)">
              <!-- 指南针样式 -->
              <!-- <div class="directionArea">
                <div class="tipText">N</div>
                <svg class="directionIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="24" height="24" style="" filter="none">
                  <g>
                  <path d="M16 29v0c-7.18 0-13-5.82-13-13s5.82-13 13-13c7.18 0 13 5.82 13 13s-5.82 13-13 13zM16 28c6.627 0 12-5.373 12-12s-5.373-12-12-12c-6.627 0-12 5.373-12 12s5.373 12 12 12v0zM18.121 18.121c-1.768 1.768-9.192 4.95-9.192 4.95s3.182-7.425 4.95-9.192c1.768-1.768 9.192-4.95 9.192-4.95s-3.182 7.425-4.95 9.192v0zM14.62 14.6c-1.414 1.414-3.606 6.435-3.606 6.435s5.020-2.192 6.435-3.606l-2.828-2.828z" fill="rgba(16,16,16,1)"></path>
                  </g>
                </svg>
              </div> -->
            </div>
            <div class="tipArea">
              <div class="tipItem">户型：{{ myApartmentTypeData.huXingInfo.huXing }}</div>
              <div class="tipItem">房屋朝向：{{ myApartmentTypeData.huXingInfo.fangWuChaoXiang }}</div>
              <div class="tipItem">建筑面积：{{ myApartmentTypeData.huXingInfo.jianZhuMianJi }}</div>
            </div>
            <div class="jingZhuangNavBtn" v-if="myApartmentTypeData.huXingInfo.jingZhuangYangBanGuanLianList && myApartmentTypeData.huXingInfo.jingZhuangYangBanGuanLianList.length > 0">
              <img class="jingZhuangNavBtnImage" :src="jingZhuangNavBtnImage" @click="navToJingZhuangHandler(myApartmentTypeData.huXingInfo.jingZhuangYangBanGuanLianList)">
            </div>
            <div class="bottomIndicator"></div>
          </div>
        </div>
        
        <div class="houseInfoArea" v-if="myApartmentTypeData.huXingInfo">
          <section class="houseInfoItemCard houseBasicCard">
            <div class="titleArea">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="23" height="23" style="" filter="none">
                <g>
                <rect width="48" height="48" fill="rgba(24,126,255,1)" fill-opacity="0.01" stroke="none"></rect><path d="M9 18V42H39V18L24 6L9 18Z" fill="none"></path><path d="M9 42V18L4 22L24 6L44 22L39 18V42H9Z" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M19 29V42H29V29H19Z" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round"></path><path d="M9 42H39" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" fill="none"></path>
                </g>
              </svg>
              <div class="titleText">户型基本信息</div>
            </div>
  
            <van-cell-group inset class="cellGroupCard">
              <zVanCell title="户型信息" :content="myApartmentTypeData.huXingInfo.huXing" />
              <zVanCell title="城市" :content="xiaoQuChengShi" />
              <zVanCell title="建筑面积" :content="myApartmentTypeData.jianZhuMianJi" />
              <zVanCell title="朝向" :content="myApartmentTypeData.huXingInfo.fangWuChaoXiang" />
              <zVanCell title="建成年代" :content="myApartmentTypeData.huXingInfo.jianChengNianDai" />
              <zVanCell title="楼型" :content="myApartmentTypeData.huXingInfo.louXingName" />
            </van-cell-group>
          </section>
  
          <section class="houseInfoItemCard indoorEquipmentInfoCard">
            <div class="titleArea">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="23" height="23" style="" filter="none">
                <g>
                <rect x="9" y="4" width="30" height="40" rx="2" stroke="rgba(24,126,255,1)" stroke-width="4" fill="none"></rect><circle cx="24" cy="31" r="6" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4"></circle><path d="M18 12H21" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M18 18H21" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M27 18H30" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
                </g>
              </svg>
              <div class="titleText">室内设备信息</div>
            </div>
  
            <div class="tableOut">
              <vantTable
                class="table"
                :columns="indoorEquipmentInfoColumns"
                :data="myApartmentTypeData.shiNeiSheBeiGuanLianList"
                :height="300"
              ></vantTable>
            </div>
          </section>
  
          <!-- <section class="houseInfoItemCard publicPoolInfoCard">
            <div class="titleArea">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="23" height="23" style="" filter="none">
                <g>
                <path d="M512 0c282.766222 0 512 229.233778 512 512s-229.233778 512-512 512S0 794.766222 0 512 229.233778 0 512 0zM234.581333 602.737778L199.111111 726.101333c0 5.461333 0 10.922667 4.067556 13.624889 2.730667 5.404444 8.192 6.712889 13.653333 6.712889l262.115556 1.592889 0.028444-0.056889 93.070222-122.737778-337.464889-22.471111z m366.279111 28.16v0.028444l-95.089777 115.484445h301.425777a17.92 17.92 0 0 0 17.692445-17.578667l-0.398222-1.706667c-0.398222-1.365333-0.995556-2.844444-0.995556-3.697777h0.056889l-15.047111-54.215112-207.644445-38.314666z m170.837334-91.761778c-2.702222 5.404444-6.826667 8.135111-8.135111 13.482667-21.219556 27.932444-42.894222 55.495111-65.080889 82.688l104.448 9.671111zM658.887111 170.666667c-88.007111 0-156.558222 72.220444-156.558222 159.857777 0 67.043556 42.666667 143.132444 78.904889 194.645334 28.501333 40.021333 58.225778 73.528889 71.168 89.031111 1.308444 1.28 3.896889 3.84 6.513778 3.84 1.308444 0 5.12-1.308444 6.428444-3.868445a988.956444 988.956444 0 0 0 71.168-89.002666c36.209778-51.484444 78.961778-127.601778 78.961778-194.616889C816.725333 242.915556 745.557333 170.666667 658.887111 170.666667z m-179.939555 243.370666l-178.972445 5.831111a15.928889 15.928889 0 0 0-14.933333 12.145778l-40.533334 141.511111 347.306667 18.574223c-37.546667-44.657778-60.871111-74.24-69.916444-89.059556-13.937778-22.812444-34.759111-64.568889-42.951111-89.002667z m167.765333-96.824889l20.565333 7.196445c-15.587556 32.227556-31.573333 59.818667-47.985778 82.602667 26.396444-1.706667 52.679111-4.551111 78.819556-8.590223-6.200889-12.600889-12.600889-24.177778-19.228444-34.588444l18.801777-6.4c14.023111 21.390222 26.225778 44.401778 36.408889 68.807111l-19.626666 8.789333c-2.56-6.4-5.176889-12.600889-7.765334-18.631111a1394.545778 1394.545778 0 0 1-115.598222 11.861334l-3.612444-20.451556c13.425778-2.958222 33.194667-33.137778 59.221333-90.595556z m47.587555-67.384888c10.808889 36.010667 29.809778 65.422222 56.974223 88.206222l-14.961778 17.408c-28.643556-24.604444-48.64-56.405333-60.017778-95.573334z m-74.581333 1.621333l19.370667 7.964444c-13.994667 41.614222-32.597333 73.386667-55.580445 95.630223l-16.611555-14.392889c23.808-22.414222 41.415111-52.195556 52.792889-89.201778z" p-id="15664" fill="rgba(24,126,255,1)" stroke="none"></path>
                </g>
              </svg>
              <div class="titleText">公摊信息</div>
            </div>
  
            <van-cell-group inset class="cellGroupCard">
              <zVanCell title="公摊比例" :content="apartmentTypeData[showIndex].gongTanInfo" />
            </van-cell-group>
          </section> -->
  
          <section class="houseInfoItemCard unitTypeCard">
            <div class="titleArea">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="23" height="23" style="" filter="none">
                <g>
                <path d="M18 6H8C6.89543 6 6 6.89543 6 8V18C6 19.1046 6.89543 20 8 20H18C19.1046 20 20 19.1046 20 18V8C20 6.89543 19.1046 6 18 6Z" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round"></path><path d="M18 28H8C6.89543 28 6 28.8954 6 30V40C6 41.1046 6.89543 42 8 42H18C19.1046 42 20 41.1046 20 40V30C20 28.8954 19.1046 28 18 28Z" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round"></path><path d="M40 6H30C28.8954 6 28 6.89543 28 8V18C28 19.1046 28.8954 20 30 20H40C41.1046 20 42 19.1046 42 18V8C42 6.89543 41.1046 6 40 6Z" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round"></path><path d="M40 28H30C28.8954 28 28 28.8954 28 30V40C28 41.1046 28.8954 42 30 42H40C41.1046 42 42 41.1046 42 40V30C42 28.8954 41.1046 28 40 28Z" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round"></path>
                </g>
              </svg>
              <div class="titleText">户型分布</div>
            </div>
  
            <van-swipe class="unitTypeImageOut" :autoplay="5000" indicator-color="white" lazy-render>
              <van-swipe-item v-for="(item, index) in myApartmentTypeData.huXingInfo.unitTypeImageList" :index="index">
                <img class="unitTypeImage" :src="item" @click="imagePreviewHandler(item)" />
              </van-swipe-item>
            </van-swipe>
          </section>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import jingZhuangNavBtnImage from '@/assets/img/jingZhuangNavBtnImage.png'
  import vantTable from 'vant-table'
  import { pageConstant } from '@/config/contant.js'
  import { postZhuHuWoDeHuXingData } from '@/api/xiaoqu/index.js'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  import { getSelectedXiaoQuId, getUserId } from '@/config/config.js'
  import { sendData } from '@/utils/postData.js'
  
  if (!getSelectedXiaoQuId()) {
    showDialog({
      message: '暂无小区数据，请先配置小区',
    }).then(() => {
      router.back()
    })
  }
  
  
  /**
   * 获取小区户型数据
   */
  const indoorEquipmentInfoColumns = ref([
    {
      prop: 'leiBieName',
      title: '类别',
      minWidth: '130px',
    },
    {
      prop: 'caiLiao',
      title: '材料',
      width: '100px',
    },
    {
      prop: 'pinPai',
      title: '品牌',
      width: '100px',
    },
  ])
  const myApartmentTypeData = ref({})
  const xiaoQuChengShi = ref('')
  const loadApartmentTypeDataHandler = () => {
    showLoadingToast({
      message: '加载中...',
      forbidClick: true,
      duration: 0
    });
  
    postZhuHuWoDeHuXingData({zhuHuId: getUserId()}).then(res => {
      // 关闭加载中提示
      closeToast();
  
      if (res.data.code == pageConstant.okCode) {
        myApartmentTypeData.value = res.data.data
        if (myApartmentTypeData.value.huXingInfo.urls) {
          myApartmentTypeData.value.huXingInfo.urls = myApartmentTypeData.value.huXingInfo.urls.split(',')[0]
        }
        if (myApartmentTypeData.value.huXingInfo.jianZhuMianJi) {
          myApartmentTypeData.value.huXingInfo.jianZhuMianJi = myApartmentTypeData.value.huXingInfo.jianZhuMianJi + '㎡'
        }
        let jianChengNianDai =  myApartmentTypeData.value.huXingInfo.jianChengNianDai
        if (jianChengNianDai && jianChengNianDai.slice(-1) !== '年') {
          jianChengNianDai = jianChengNianDai + '年'
        }
        // if (item.gongTanLv && item.comment) {
        //   item.gongTanInfo = item.gongTanLv + '(' + item.comment + ')'
        // }

        if (myApartmentTypeData.value.huXingInfo.fenBuTuUrls) {
          myApartmentTypeData.value.huXingInfo.unitTypeImageList = myApartmentTypeData.value.huXingInfo.fenBuTuUrls.split(',')
        }

        if (res.data.data.xiaoQu && res.data.data.xiaoQu.shiName) {
          xiaoQuChengShi.value = res.data.data.xiaoQu.shiName
        }
      } else {
        showToast(res.data.msg);
      }
    })
    .catch((err) => {
      console.log(err)
    })
  }
  loadApartmentTypeDataHandler()
  
  /**
   * 顶部轮播图精装查看功能
   */
  const showIndex = ref(0)
  const houseInfoKey = ref(0)
  const getSwipeIndexHandler = (index) => {
    showIndex.value = index
    houseInfoKey.value = houseInfoKey.value + 1
  }
  const navToJingZhuangHandler = (jingZhuangYangBanGuanLianList) => {
    router.push({
      path: '/jingZhuangYangBan'
    })
    sendData(JSON.stringify(jingZhuangYangBanGuanLianList))
  }
  const imagePreviewHandler = (url) => {
    showImagePreview([url]);
  }
  </script>
  
  <style lang="scss" scoped>
  .out {
    min-height: 100dvh;
    width: 100vw;
    background-color: rgb(241, 241, 241);
  
    .pageOut {
      padding: 15px;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-flow: column nowrap;
  
      .swipeArea {
        .swipeItemOut {
          display: flex;
          background-color: #fff;
          border-radius: 5px;
          position: relative;
  
          .apartmentTypeImageOut {
            position: relative;
            margin-left: 40px;
  
            .apartmentTypeImage {
              object-fit: contain;
              height: 217px;
              width: 182px;
            }
  
            .directionArea {
              position: absolute;
              top: 5px;
              left: 150px;
  
              .tipText {
                width: 24px;
                text-align: center;
                font-weight: bold;
                font-size: 12px;
              }
  
              .directionIcon {
                transform: rotate(0.375turn);
              }
            }
          }
  
          .tipArea {
            margin-top: 30px;
            margin-left: 10px;
  
            .tipItem {
              font-size: 14px;
              margin-top: 7px;
              font-weight: bold;
            }
          }
  
          .jingZhuangNavBtn {
            position: absolute;
            bottom: 3px;
            right: 8px;
  
            .jingZhuangNavBtnImage {
              height: 30px;
            }
          }
        }
        
        .custom-indicator {
          color: #fff;
          background: rgba(0, 0, 0, .5);
          padding: 4px 5px 2px;
          font-size: 12px;
          position: absolute;
          top: 5px;
          left: 5px;
        }
      }
  
      .houseInfoArea {
        .houseInfoItemCard {
          // padding: 15px;
          background-color: #fff;
          border-radius: 5px;
          margin-top: 10px;
  
          .titleArea {
            width: 100%;
            border-bottom: 1px solid #e0e0e0;
            padding: 10px 16px;
            box-sizing: border-box;
            display: flex;
  
            .titleText {
              line-height: 26px;
              margin-left: 7px;
              font-weight: 600;
            }
          }
  
          .cellGroupCard {
            margin: 0;
          }
  
          .tableOut {
            border-radius: 8px;
            overflow: hidden;
            color: #5a5a5a;
            padding: 15px;
            // ::v-deep .vant-table-wrapper {
            //   border: 1px solid #d0d0d0;
            // }
  
            ::v-deep .vant-th {
              font-size: 14px;
            }
            ::v-deep .vant-td {
              font-size: 16px;
            }
            ::v-deep .vant-td:first-child {
              color: #344054;
            }
          }
  
          .unitTypeImageOut {
            padding: 15px;
            box-sizing: border-box;
  
            ::v-deep .van-swipe__track {
              width: 100% !important;
  
              .van-swipe-item {
                width: 100% !important;
              }
            }
  
            .unitTypeImage {
              object-fit: contain;
              width: 100%;
              border-radius: 5px;
            }
          }
        }
      }
    }
  }
  </style>